<template>
  <div>
    <DetailBook
      :book="book"
    ></DetailBook>
    <DetailStat
      :readers="book.readers"
      :readerNum="book.readerNum"
      :rankNum="book.rankNum"
      :rankAvg="book.rankAvg"
    ></DetailStat>
    <DetailRate
      :rateValue="value"
      @onRateChange="onRateChange"
    ></DetailRate>
    <DetailContents
      :contents="contents"
      @readBook="readBook"
    ></DetailContents>
    <DetailBottom
      :isInShelf="isInShelf"
      @handleShelf="handleShelf"
      @readBook="readBook"
    ></DetailBottom>
  </div>
</template>

<script>
import DetailBook from '../../components/detail/DetailBook'
import {bookDetail, bookRankSave, bookContents, bookShelf, bookShelfSave, bookShelfRemove} from '../../api'
import {getStorageSync} from '../../api/wechat'
import DetailStat from '../../components/detail/DetailStat'
import DetailRate from '../../components/detail/DetailRate'
import DetailContents from '../../components/detail/DetailContents'
import DetailBottom from '../../components/detail/DetailBottom'

export default {
  name: 'detail',
  components: {DetailBottom, DetailContents, DetailRate, DetailStat, DetailBook},
  data () {
    return {
      book: {},
      value: null,
      contents: [],
      isInShelf: false
    }
  },
  mounted () {
    this.getBookDetail()
    this.getBookContents()
  },
  methods: {
    getBookDetail () {
      const openId = getStorageSync('openId')
      const {fileName} = this.$route.query
      if (openId && fileName) {
        bookDetail({
          openId,
          fileName
        }).then(res => {
          this.book = res.data.data
        })
      }
    },
    onRateChange (value) {
      const openId = getStorageSync('openId')
      const {fileName} = this.$route.query
      bookRankSave({
        openId,
        fileName,
        rank: value
      }).then(() => {
        this.getBookDetail()
        this.value = value
      })
    },
    getBookContents () {
      const {fileName} = this.$route.query
      bookContents({
        fileName
      }).then(res => {
        this.contents = res.data.data
      })
    },
    /**
     * 点击添加书架或者移除书架处理事件
     */
    handleShelf () {
      const that = this
      const openId = getStorageSync('openId')
      const {fileName} = this.$route.query
      if (!this.isInShelf) {
        bookShelfSave({
          openId,
          fileName
        }).then(() => {
          that.getBookIsInShelf()
        })
      } else {
        mpvue.showModal({
          title: '提示',
          content: `是否确认将《${this.book.title}》移除书架`,
          success (res) {
            if (res.confirm) {
              bookShelfRemove(openId, fileName).then(() => {
                that.getBookIsInShelf()
              })
            }
          }
        })
      }
    },
    getBookIsInShelf () {
      const openId = getStorageSync('openId')
      const {fileName} = this.$route.query
      if (openId && fileName) {
        bookShelf({openId, fileName}).then(response => {
          const {data} = response.data
          data.length === 0 ? this.isInShelf = false : this.isInShelf = true
        })
      }
    },
    readBook (href) {
      const query = {
        fileName: this.book.fileName,
        opf: this.book.opf
      }
      if (this.book && this.book.fileName) {
        this.$router.push({
          path: '/pages/read/main',
          query
        })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>

</style>
